<template>
  <table class="dw-form-table">
    <tbody>
      <tr>
        <td class="dw-td-label"><span class="required">接口名称</span></td>
        <td>
          <el-form-item>
            <el-input></el-input>
          </el-form-item>
        </td>
        <td class="dw-td-label"><span class="required">方法名称</span></td>
        <td>
          <el-form-item>
            <el-input></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td class="dw-td-label"><span class="required">Soap协议</span></td>
        <td>
          <el-form-item>
            <el-select v-model="value" placeholder="Select">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </td>
        <td class="dw-td-label"><span class="required">版本号</span></td>
        <td>
          <el-input></el-input>
        </td>
      </tr>
      <tr>
        <td class="dw-td-label"><span class="required">最新发布标志</span></td>
        <td>
          <span>未发布</span>
        </td>
        <td class="dw-td-label"><span class="required">排序</span></td>
        <td>
          <el-input-number v-model="sortNo" :min="1" :max="10" />
        </td>
      </tr>

      <tr>
        <td class="dw-td-label"><span class="required">接口地址</span></td>
        <td :colspan="3">
          <el-input-tag v-model="input" placeholder="Please input" aria-label="Please click the Enter key after input" />
        </td>
      </tr>
      <tr>
        <td class="dw-td-label"><span class="required">自定义标签</span></td>
        <td :colspan="3">
          <el-input-tag v-model="input" placeholder="Please input" aria-label="Please click the Enter key after input" />
        </td>
      </tr>
      <tr>
        <td class="dw-td-label"><span class="required">接口说明</span></td>
        <td :colspan="3">
          <el-input v-model="textarea" maxlength="30" style="width: 100%" placeholder="Please input" show-word-limit type="textarea" />
        </td>
      </tr>
      <tr>
        <td class="dw-td-label"><span class="required">请求参数</span></td>
        <td :colspan="3" style="margin: 0; padding: 0">
          <input-param></input-param>
        </td>
      </tr>
      <tr>
        <td class="dw-td-label"><span class="required">请求响应体</span></td>
        <td :colspan="3" style="margin: 0; padding: 0">
          <output-param></output-param>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import OutputParam from '@/components/api-config-form/soap-api-form/components/output-param.vue';
import InputParam from '@/components/api-config-form/soap-api-form/components/input-param.vue';
const input = ref<string[]>();

const sortNo = ref<number>(1);
const value = ref('');
const textarea = ref('');
const options = [
  {
    value: 'Option1',
    label: 'SOAP 1.1',
  },
  {
    value: 'Option2',
    label: 'SOAP 1.2',
  },
];
</script>
<style lang="scss" scoped></style>
